<template>
  <div ref="print"
       class="-print box">
    <div class="preview"
         style="padding: 10px 0;">
      <div style="display: flex">
        <img style="height: 46px; width: 150px; margin: 10px 20px;"
             src="@/static/images/d_logo.png"
             alt="logo" />
        <div style="margin-top: 20px;width: 60%;">
          <div style="margin: 10px; line-height: 20px; text-align: center;">
            <label style="display: block; font-size:20px; font-weight:600">{{ tenantName }}</label>
          </div>
          <div style="margin: 10px; line-height: 16px; text-align: center;">
            <label style="display: block;">（合单）</label>
          </div>
        </div>
      </div>
      <div style="margin: 15px 20px; line-height: 16px; display: flex;">
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">合同编号：</span>{{ details.contractNo }}</label>
        <label v-if="isCst"
               style="flex: 2;"><span style="color:var(--prev-color-text-primary)">发货方：</span>{{ details.customerName }}</label>
        <label v-else
               style="flex: 2;"><span style="color:var(--prev-color-text-primary)">承运方：</span>{{ details.carrierName }}</label>
      </div>
      <div style="margin: 0px 20px; border-top: 1px solid var(--prev-color-text-regular)"></div>
      <div v-if="!isCst"
           style="margin: 15px 20px; line-height: 16px; display: flex;">
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">承运联系人：</span>{{ details.contactName || '--'  }}</label>
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">承运联系电话：</span>{{ details.contactMobile || '--' }}</label>
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">制单时间：</span>{{ details.createAt }}</label>
      </div>
      <div style="margin: 15px 20px; line-height: 16px; display: flex;">
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">制单人：</span>{{ details.createBy }}</label>
        <label v-if="isCst"
               style="flex: 1;"><span style="color:var(--prev-color-text-primary)">制单时间：</span>{{ details.createAt }}</label>
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">合单数：</span>{{ tableData.length }}单</label>
        <label v-if="!isCst"
               style="flex: 1;"><span style="color:var(--prev-color-text-primary)">提送次数：</span>{{ details.distinctFromAddress.length }}提{{ details.distinctToAddress.length }}送</label>
      </div>
      <div style="margin: 15px 20px; line-height: 16px; display: flex;">
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">总费用：</span>{{details.totalFee}}元</label>
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">预付款：</span>{{details.prepayFee}}元</label>
        <label style="flex: 1;"><span style="color:var(--prev-color-text-primary)">货到付款：</span>{{details.arrivePayFee}}元</label>
      </div>
      <div v-if="isCst"
           style="margin: 15px 20px; line-height: 16px;">
        <label style="display: block;"><span style="color:var(--prev-color-text-primary)">提送次数：</span>{{ details.distinctFromAddress.length }}提{{ details.distinctToAddress.length }}送</label>
      </div>
      <div style="margin: 15px 20px; line-height: 16px;">
        <label style="display: block;"><span style="color:var(--prev-color-text-primary)">备注：</span>{{ details.desc }}</label>
      </div>
      <div style="margin: 20px 20px 0;font-weight:500">子单详情：</div>
      <table cellspacing="0"
             cellpadding="5"
             height="200px"
             style="margin: 15px 20px; border-collapse: collapse; border-top: 1px solid var(--prev-border-color-lightgrey); border-left: 1px solid var(--prev-border-color-lightgrey); border-bottom: 0;">
        <thead>
          <tr>
            <th style="width:15%;font-size:12px; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              <div class="cell">合同编号</div>
            </th>
            <th style="width:32%;font-size:12px; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              <div class="cell">发货方信息</div>
            </th>
            <th style="width:32%;font-size:12px; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              <div class="cell">收货方信息</div>
            </th>
            <th style="font-size:12px; border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              <div class="cell">订单信息</div>
            </th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(item, index) in tableData"
              :key="index">
            <td style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;"
                width="10%">{{ item.contractNo }}</td>
            <td style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{ item.customerName }}<br />
              {{ item.fromContactName }} {{ item.fromContactMobile }}<br />
              {{ item.fromProvince }}{{ item.fromCity }}{{ item.fromDistrict }}{{ item.fromAddress }}
            </td>
            <td style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{ item.consigneeName }} <br />
              {{ item.toContactName }} {{ item.toContactMobile }}<br />
              {{ item.toProvince }}{{ item.toCity }}{{ item.toDistrict }}{{ item.toAddress }}
            </td>
            <td style="font-size:12px; word-wrap:break-word;word-break:break-all;border-top: 0; border-right: 1px solid var(--prev-border-color-lightgrey); border-bottom: 1px solid var(--prev-border-color-lightgrey); border-left: 0;">
              {{item.transportRequirement.transportModeDesc}} <span> | {{item.transportRequirement.shipModeDesc}}</span>
              <br>
              {{item.transportRequirement.deliver?'送货':''}} <span v-if="item.transportRequirement.deliver&&item.transportRequirement.pick">|</span>
              {{item.transportRequirement.pick?'提货':''}} <span v-if="item.transportRequirement.pick"> | </span>
              {{item.transportRequirement.offLoad?'卸货':''}}<span v-if="item.transportRequirement.offLoad"> | </span>
              {{item.transportRequirement.onLoad?'装货':''}}<span v-if="item.transportRequirement.onLoad"> | </span>
              <span v-if="item.transportRequirement.insure">{{item.transportRequirement.insure?'保价':''}}</span>
              <br>
              <span>{{item.calculateWeight || 0}}公斤 | {{item.calculateVolume || 0}}方 | {{item.totalQuantity || 0}}件</span>
            </td>
          </tr>
        </tbody>
      </table>
      <div style="margin: 10px 20px; line-height: 22px;font-size:12px;">
        物品总数量{{details.totalQuantity}}；总重量{{details.calculateWeight}}公斤；总体积{{details.calculateVolume}}立方米；物品总价值{{details.totalValue}}元
      </div>
      <div style="margin: 20px; line-height: 22px;">
        <label style="display: block;">注意事项：</label>
        <span class="detail-text"
              style="display: inline-block; font-size:12px;">一、发货方托运的货物如实填写，不得隐瞒货物名称、数量及性质，不得在托运货物内夹带危险品、禁运物品。否则承运方在运输途中为此造成
          损失均由甲方负责。 <br />
          二、发货方若不跟人押车，卸货地址务必填清，货物包装必须完整无损，承运方按卸货地址给予按期，完整无缺运到和办理交接手续，否则造成
          损失各负其责。 <br />
          三、发货方托运货物时、必须参加保险，如不参加保险，出现货损、货差由发货方自负。
        </span>
      </div>
      <div style="margin: 20px;">
        <el-col :span="8">
          <label>核对人: </label>
          <span style="border-bottom: 1px solid #000; display: inline-block; width: 70%;"></span>
        </el-col>
        <el-col :span="8">
          <label>签收人: </label>
          <span style="border-bottom: 1px solid #000; display: inline-block; width: 70%;"></span>
        </el-col>
        <el-col :span="8">
          <label>签收时间: </label>
          <span style="border-bottom: 1px solid #000; display: inline-block; width: 70%;"></span>
        </el-col>
      </div>
    </div>
  </div>
</template>
<script>
import { onebill } from "@/api/index";
import completeData from "@/libs/conversion.js";
import { returnThousandDigit } from "@/libs/util.js";

export default {
  name: "CombineFeePrint",
  data () {
    return {
      details: {},
      tableData: [],
      tableColumn: [
        {
          label: "合同编号",
          prop: "materialCode",
          width: "90"
        },
        {
          label: "发货时间",
          prop: "goodsName",
          width: "90"
        },
        {
          label: "要求到货时间",
          prop: "spec",
          width: "100"
        },
        {
          label: "发货方信息",
          prop: "quantity",
          width: "110"
        },
        {
          label: "收货方信息",
          prop: "totalWeight",
          width: "110"
        },
        {
          label: "订单信息",
          prop: "totalVolume",
          width: "100"
        },
        {
          label: "跟踪方式",
          prop: "signQuantity",
          width: "100"
        }
      ],
      userInfo: sessionStorage.getItem('userInfo')
    };
  },
  computed: {
    combineId () {
      return Number(this.$route.query.combineId);
    },
    isCst () {
      return this.details?.waybills && this.details?.waybills[0].waybillType === 10;
    },
    user () {
      return JSON.parse(this.userInfo)
    },
    tenantName () {
      return this.user?.tenantName
    }
  },
  created () {
    this.getDetail()
  },
  mounted () {
    setTimeout(() => {
      this.print();
    }, 1000);
  },
  methods: {
    async getDetail () {
      let { code, data, message } = await onebill.getCombineDetail(this.combineId);
      if (code === 0) {
        this.details = data;
        this.details.createBy = data.createBy?.name;
        if (data.carrier) {
          this.details.carrierName = data.carrier.carrierName;
          this.details.contactName = data.carrier.carrierContactName;
          this.details.contactMobile = data.carrier.carrierContactMobile;
        }
        if (data.customer) {
          this.details.customerName = data.customer.customerName;
        }
        this.details.totalFee = data?.price?.totalFee ? returnThousandDigit(data?.price?.totalFee, 2) : 0;
        this.details.prepayFee = data?.price?.prepayFee ? returnThousandDigit(data?.price?.prepayFee, 2) : 0;
        this.details.arrivePayFee = data?.price?.arrivePayFee ? returnThousandDigit(data?.price?.arrivePayFee, 2) : 0;
        this.details.totalValue = data.totalValue ? returnThousandDigit(data.totalValue, 2) : 0;
        this.tableData = completeData.redirect(data.waybills);
      } else {
        this.$message.error(message);
      }
    },
    print () {
      setTimeout(() => {
        this.$print(this.$refs.print)
        // if (window.document.execCommand("print")) window.close();
        // window.print()
      }, 1000);
    },
  }
};
</script>

<style scoped>
@media print {
  @page {
    size: auto A4 landscape;
    margin: 6mm 1mm;
  }
  html {
    background-color: var(--prev-bg-white);
    height: auto;
    margin: 0px;
  }
  .preview >>> label.labelSty,
  .preview >>> .detail-text {
    font-size: 14px;
    margin-bottom: 3px;
    font-weight: 400;
  }
  table tr.lastrow td {
    border-bottom: 0;
  }
  td.lastCol {
    border-right: 0;
  }
  th.lastCol {
    border-right: 0;
  }
}
@media screen {
  .box {
    display: none;
  }
}
</style>
